.user-box {
  position: relative;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  margin-top: -115rpx;
  box-shadow: $box-shadow;
}

.avatar {
  position: relative;
  margin-top: -35rpx;
  margin-left: 35rpx;
  margin-right: 35rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 100%;
  }

  .badge {
    position: absolute;
    right: -10rpx;
    bottom: -10rpx;
    background-color: #ffffff;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-warning;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.title-tip {
  margin-top: 20rpx
}

.level-benefit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 35rpx;
  padding: 10rpx 0 10rpx 30rpx;
  border-radius: 50rem 0 0 50rem;
}

.user-grid {
  width: 25%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .value {
    margin-bottom: 20rpx;
  }
}
